<template>
    <div class="container white">
        <div class="total-time" @click="openDatePicker">
            <span>当前统计时间:{{beginDateTime}} <span v-if="endDateTime">~ {{endDateTime}}</span></span>
            <span style="float:right;font-size:18px"><i class="fa fa-caret-right"></i></span>
        </div>
        <div class="space-s"></div>
        <div class="total-data">
            <div class="total-data-info border-right border-bottom"><loading v-if="totalLoading" /><div class="total-number gray" v-if="!totalLoading" >{{reportCount}}</div><div class="total-info-title">{{selectType}}有效报备数</div></div>
            <div class="total-data-info border-bottom"><loading v-if="totalLoading" /><div class="total-number gray" v-if="!totalLoading" >{{visitCount}}</div><div class="total-info-title">{{selectType}}到访数</div></div>
            <div class="total-data-info border-right border-bottom"><loading v-if="totalLoading" /><div class="total-number pink" v-if="!totalLoading" >{{payDepositCount}}</div><div class="total-info-title">{{selectType}}认筹数</div></div>
            <div class="total-data-info border-bottom"><loading v-if="totalLoading" /><div class="total-number pink" v-if="!totalLoading" >{{subscribeTotal}}</div><div class="total-info-title">{{selectType}}认购数</div></div>
            <div class="total-data-info border-right"><loading v-if="totalLoading" /><div class="total-number pink" v-if="!totalLoading" >{{signCount}}</div><div class="total-info-title">{{selectType}}签约数</div></div>
            <div class="total-data-info"><loading v-if="totalLoading" /><div class="total-number pink" v-if="!totalLoading" >{{signTotal}}</div><div class="total-info-title">{{selectType}}签约业绩(万)</div></div>
        </div>
        <div class="space-m"></div>
        <div class="top-list">
            <div class="report-list">
                <div class="report-list-header">
                    <span class="icon-line"><strong>|</strong></span>
                    <span class="header-title">楼盘销售业绩Top5</span>
                    <span class="header-all" v-if="premisesDataList.length != 0"><a @click="gotoPage(1)">查看全部></a></span>
                </div>
                <ul style="min-height: 140px;" v-if="premisesDataList.length != 0">
                    <li class="report-li" v-for="(p,index) in premisesDataList"><span class="orange">Top{{index+1}}</span> {{setWords(p.premisesName)}} <span class="report-result">签约业绩：{{p.dealAmount}}万</span></li>
                </ul>
                <div class="warn" v-if="premisesDataList.length == 0 & !premisesLoading">
                    <i class="warn-icon fa fa-exclamation-circle"></i>
                    <p>当前时间段内没有楼盘产生业绩</p>
                </div>
                <loading v-if="premisesLoading" />
            </div>
        </div>
        <div class="space-m"></div>
        <div class="top-list">
            <div class="report-list">
                <div class="report-list-header">
                    <span class="icon-line"><strong>|</strong></span>
                    <span class="header-title">机构销售业绩Top5</span>
                    <span class="header-all" v-if="orgDataList.length != 0"><a @click="gotoPage(2)">查看全部></a></span>
                </div>
                <ul style="min-height: 140px;" v-if="orgDataList.length != 0">
                    <li class="report-li" v-for="(o,index) in orgDataList"><span class="orange">Top{{index+1}}</span> {{setWords(o.agencyName)}}<span class="report-result">签约业绩：{{o.dealAmount}}万</span></li>
                </ul>
                <div class="warn" v-if="orgDataList.length == 0 && !orgLoading ">
                    <i class="warn-icon fa fa-exclamation-circle"></i>
                    <p>当前时间段内没有机构产生业绩</p>
                </div>
                <loading v-if="orgLoading" />
            </div>
        </div>
        <div class="space-l"></div>
        <div class="space-l"></div>
        <div class="space-l"></div>
        <div class="date-select">
            <div class="col33 date-selected" @click="changeSelect(1)">日</div>
            <div class="col33"  @click="changeSelect(2)">周</div>
            <div class="col33"  @click="changeSelect(3)">月</div>
        </div>
        <mt-popup v-model="weekPopup" position="bottom"  class="mint-popup mint-datetime mint-popup-bottom">
            <div class="picker-toolbar">
                <div class="mint-datetime-action" style="width:50%;float:left" @click="weekPopup=false">取消</div>
                <div class="mint-datetime-action" style="width:50%;float:left" @click="selectWeek">确定</div>
            </div>
            <mt-picker :slots="weeks" value-key='showText' @change="weekChange"  ></mt-picker>
        </mt-popup>
        <mt-popup v-model="monthPopup" position="bottom"  class="mint-popup mint-datetime mint-popup-bottom">
            <div class="picker-toolbar">
                <div class="mint-datetime-action" style="width:50%;float:left" @click="monthPopup=false">取消</div>
                <div class="mint-datetime-action" style="width:50%;float:left" @click="selectMonth">确定</div>
            </div>
            <mt-picker :slots="months" value-key='showText' @change="monthChange"></mt-picker>
        </mt-popup>
        <mt-datetime-picker ref="picker" type="date" v-model="daySelect"  @confirm="dayHandleConfirm"  year-format="{value} 年" :startDate="pickerStartDate" :endDate="pickerEndDate"
                            month-format="{value} 月"
                            date-format="{value} 日"></mt-datetime-picker>

    </div>
</template>

<script>
    import { Popup,Picker,DatetimePicker,Indicator} from 'mint-ui';
    import { getWeeks,dateFormat,getWeekNumber,getNow,getMonthNow,getWeekOfYear } from '../../assets/js/dateUtils.js'
    import loading from '../base/loading.vue'
    export default {
        name: "boss-board-top",
        components:{Popup,Picker,DatetimePicker,loading },
        data(){
            return{
                weekPopup:false,
                monthPopup:false,
                dayPopup:true,
                weeks: [{values:getWeeks(),defaultIndex:getWeekNumber()-1}],
                months:[],
                pickerStartDate:new Date(new Date().getFullYear(),0,1),
                pickerEndDate:new Date(new Date().getFullYear(),11,31),
                selectIndex:1,
                index:1,
                beginDateTime:'',
                beginDateTimeTemp:{},
                endDateTime:'',
                endDateTimeTemp:{},
                daySelect:new Date(),
                selectType:'日',
                premisesDataList:[],
                orgDataList:[],
                reportCount:'0',
                visitCount:'0',
                payDepositCount: '0',
                subscribeTotal: '0',
                signCount:'0',
                signTotal:'0',
                premisesLoading:false,
                orgLoading:false,
                totalLoading:false,
            }
        },
        mounted(){
            this.initPageDate();
        },
        methods:{
            initPageDate(){
                let solts = [];
                for(var i=1;i<13;i++){
                    solts.push({index:i, showText:i+"月"});
                }
                console.log(solts);
                this.months.push({values:solts});
                //默认当日
                if(window.localStorage.getItem("b_beginDateTime")){
                    this.beginDateTime = window.localStorage.getItem("b_beginDateTime");
                    this.endDateTime = window.localStorage.getItem("b_endDateTime");
                    this.index = window.localStorage.getItem("b_dimension");
                    this.initFromHistory(this.index);
                }else{
                    this.beginDateTime = getNow();
                    this.getBoardData();
                }

            },
            dayHandleConfirm(){
                this.beginDateTime = dateFormat("yyyy-MM-dd",this.daySelect);
                this.endDateTime = '';
                this.getBoardData();
            },
            monthChange(picker, values){
                let d = picker.getSlotValue(0);
                if(d){
                    this.beginDateTimeTemp = d;
                }
            },
            weekChange(picker, values){
                let d = picker.getSlotValue(0);
                if(d){
                    this.beginDateTimeTemp = d.beginDate;
                    this.endDateTimeTemp = d.endDate;
                }
            },
            selectWeek(){
                this.beginDateTime = this.beginDateTimeTemp;
                this.endDateTime = this.endDateTimeTemp;
                this.weekPopup = false;
                this.getBoardData();
            },
            selectMonth(){
                let nowDate = new Date();
                if(!this.beginDateTimeTemp.index){
                    this.beginDateTimeTemp.index = 1;
                }
                this.beginDateTime = nowDate.getFullYear() +"-" +this.beginDateTimeTemp.index;
                this.monthPopup = false;
                this.getBoardData();
            },
            openDatePicker(){
                this.pickerStartDate.setFullYear(new Date().getUTCFullYear(),0,1);
                this.pickerEndDate.setFullYear(new Date().getUTCFullYear(),11,31);
                if(this.index == 1){
                    this.$refs.picker.open();
                }else if(this.index == 2){
                    this.weekPopup = true;
                }else if(this.index == 3){
                    this.monthPopup = true;
                }
            },
            changeSelect(index){
                var dates = document.getElementsByClassName("col33");
                for(var i=0;i<dates.length;i++){
                    dates[i].classList.remove("date-selected");
                }
                if(index == 1){
                    this.selectType='日';
                    this.beginDateTime = getNow();
                    this.endDateTime = '';
                }else if(index == 2){
                    this.selectType='周';
                    let weekNO = getWeekOfYear();
                    let weekNow = getWeeks()[weekNO-1];
                    this.beginDateTime = weekNow.beginDate;
                    this.endDateTime = weekNow.endDate;
                }else if(index == 3){
                    this.selectType = '月';
                    let dateNow = getNow();
                    this.beginDateTime =getMonthNow();
                    this.endDateTime = '';
                }
                // index== 1?this.selectType='日':index == 2?this.selectType='周':this.selectType = '月';
                this.index = index;
                dates[index-1].classList.add('date-selected');
                this.getBoardData();
            },
            getBoardData(){
                var _self = this;
                var body = {}
                var params = {
                    beginTime:'',
                    endTime:'',
                    dimension:this.index,
                }
                _self.totalLoading = true;
                //获取数据
                if(this.index == 1){
                    if(this.beginDateTime){
                        params.beginTime = this.beginDateTime;
                    }else{
                        params.beginTime = getNow();
                    }
                }else if(this.index == 2){
                    if(this.beginDateTime){
                        params.beginTime = this.beginDateTime;
                        params.endTime = this.endDateTime;
                    }else{
                        params.beginTime = getWeekNumber();
                    }
                } else if(this.index == 3){
                    //月份
                    var tempDate = this.beginDateTime.split("-");
                    var nowDate = new Date();
                    nowDate.setFullYear(tempDate[0],tempDate[1],0);
                    var days = nowDate.getDate();
                    params.beginTime = tempDate[0]+'-'+tempDate[1]+'-1';
                    params.endTime = tempDate[0]+'-'+tempDate[1]+'-'+days;
                }

                let url = this.utilHelper.apiUrl + '/api/bossBord';
                body.params = params;
                this.$http.post(url,body).then((response)=>{
                    var body = response.body;
                    if(body.result == 1){
                        let resData = body.resData;
                        // _self.premisesDataList = resData.houseSalePerformanceDtoList;
                        // _self.orgDataList = resData.organSalePerformanceDtoList;
                        _self.reportCount = resData.validReportCount;
                        _self.visitCount = resData.validVisitCount;
                        _self.payDepositCount = resData.payDepositCount;
                        _self.subscribeTotal = resData.subscribeTotal;
                        _self.signCount = resData.signCount;
                        _self.signTotal = resData.signAmountCount;
                    }else{

                    }
                    _self.totalLoading = false;
                })
                //楼盘数据加载
                _self.getSubDataList(params,1);
                //机构门店数据加载
                _self.getSubDataList(params,2);

            },
            getSubDataList(params,type){
                //获取楼盘销售业绩表
                var _self = this;
                _self.premisesDataList = [];
                _self.orgDataList = [];

                var body = {
                    params:{
                        pageNo:1,
                        pageSize:5,
                        beginTime:params.beginTime,
                        endTime:params.endTime,
                        dimension:params.dimension
                    }
                };
                let dataUrl = '';
                if (type == 1) {
                    //楼盘销售业绩分页列表
                    dataUrl = '/api/houseSalePerformancePageList';
                    _self.premisesLoading = true;
                } else if (type == 2) {
                    //机构销售业绩分页列表
                    dataUrl = '/api/organSalePerformancePageList'
                    _self.orgLoading = true;
                }
                let url = this.utilHelper.apiUrl + dataUrl;
                this.$http.post(url, body).then((response) => {
                    var body = response.body;
                    if (body.result == 1) {
                        let resData = body.resData;
                        let rows = resData.page.rows;
                        this.dataTotal = resData.totalAmount
                        for(var i=0;i<rows.length;i++){
                            if(type == 1){
                                _self.premisesDataList.push(rows[i]);
                            }else if(type == 2){
                                _self.orgDataList.push(rows[i])
                            }

                        }
                    } else {

                    }
                    if(type == 1){
                        _self.premisesLoading = false;
                    }else if(type == 2){
                        _self.orgLoading = false;
                    }
                })
            },
            gotoPage(to){
                //存取到本地缓存
                var query = {
                    beginTime:this.beginDateTime,endTime:this.endDateTime,dimension:this.index,dataType:to
                }
                window.localStorage.setItem("b_beginDateTime",this.beginDateTime);
                window.localStorage.setItem("b_endDateTime",this.endDateTime);
                window.localStorage.setItem("b_dimension",this.index);
                this.$router.push( {name:'BossBoardList',query:query});
            },
            setWords(text){
                if(text.length > 15 ){
                    return text.substring(0,15)+'...';
                }else{
                    return text;
                }
            },
            initFromHistory(index){
                //初始化
                if(window.localStorage.getItem("b_beginDateTime")){
                    this.beginDateTime = window.localStorage.getItem("b_beginDateTime")
                }else{
                    return;
                }
                if(window.localStorage.getItem("b_endDateTime")){
                    this.endDateTime = window.localStorage.getItem("b_endDateTime")
                }
                if(window.localStorage.getItem("b_dimension")){
                    this.dimension = window.localStorage.getItem("b_dimension")
                }else{
                    return;
                }
                if(index == 1){
                    this.selectType='日';
                }else if(index == 2){
                    this.selectType='周';
                }else if(index == 3){
                    this.selectType = '月';
                }
                var dates = document.getElementsByClassName("col33");
                for(var i=0;i<dates.length;i++){
                    dates[i].classList.remove("date-selected");
                }
                this.index = index;
                dates[index-1].classList.add('date-selected');
                this.getBoardData();
            }

        }
    }
</script>

<style scoped>
    .white{background: #fff;}
    .orange{color:#e88037;}
    .gray{color:#999;}
    .pink{color:#FF6A6A}
    .space-m{width: 100%;height: 20px;background:#f8f5f3;}
    .space-s{width: 100%;height: 5px;background:#f8f5f3;}
    .space-l{width: 100%;height: 30px;background:#f8f5f3;}
    .border-right{border-right: 1px solid #ccc;}
    .border-bottom{border-bottom: 1px solid #ccc;}
    .total-time{width: 95%;height: 40px;line-height: 40px;color:#cccccc;margin: 0 auto;}
    .total-data{width: 95%;height: 300px;margin: 0 auto;}
    .total-data-info{width: 50%;float:left;height: 100px;text-align: center;color: #999;}
    .total-number{font-size: 24px; font-weight: 800;margin-top: 20px;}
    .top-list{width:95%;margin: 0 auto;}
    .report-list-header{height: 40px;line-height: 40px;}
    .header-title{color:#e88037;}
    .header-all{float:right;}
    .report-result{float:right;color:#e88037;}
    .report-li{height: 50px;line-height: 49px;border-bottom: 1px solid #e6e6e6;;}
    .date-select{width: 100%;height: 50px;line-height: 50px;position: fixed;margin-top: 35px;bottom:0;background: #fff;}
    .col33{width: 33.33%;height: 50px;line-height: 50px;float: left;text-align: center;}
    .date-selected{background:#e88037;color:#fff;}
    .icon-line{color:#e88037;margin-right: 15px;}
    .warn{width: 200px;margin: 30px auto;text-align: center;}
    .warn-icon{font-size:50px; color: #cccccc;}
</style>